<html>
<head>
	<title>web-отчет</title>
    <!-- Подключение всех js'ок и css'ок для корректной работы jquery easyUi -->
	<link rel="stylesheet" type="text/css" href="/static/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="/static/themes/icon.css">
	<script type="text/javascript" src="/static/jquery.min.js"></script>
	<script type="text/javascript" src="/static/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="/static/datagrid-filter.js"></script>
    <script type="text/javascript" src="/static/locale/easyui-lang-ru.js"></script>  
</head>
<body>
    <!-- div с параметрами -->
    <div align="center">
        <form   method="post" 
                action=".."
                name="reportData">
                <!-- в фигурных скобочках описывается логика Django, для рендера старниц
                 {% if dtFrom %}{{dtFrom}}{% else %}20130101{% endif %} - если при рендере подставлен параметр dtFrom то использовать в качестве значения его,
                    иначе подставить некое стандартное число. -->
                С:<input    class="easyui-datebox" name="dtFrom" data-options="formatter:myformatter,parser:myparser,validType:'md[\'10112012\']'" 
                            required
                            value="{% if dtFrom %}{{dtFrom}}{% else %}20130101{% endif %}"></input>
                По:<input   class="easyui-datebox" name="dtTo" data-options="formatter:myformatter,parser:myparser,validType:'md[\'10112012\']'" 
                            required
                            value="{% if dtTo %}{{dtTo}}{% else %}20130331{% endif %}"></input>
                <!-- Комбобокс для отображения дерева ФЕ, в параметре url указывает куда надо "стучаться" дял получения данных -->
                <input class="easyui-combotree" style="width:400px;" url="loadTree" name="territory" value="1">
                <input type="submit" value="Обновить данные">
        </form>
    </div>
    <!-- div с главной таблицей -->
    <div align="center">
        <!-- Таблица  easyUI с включённой сортировкои и фильтрами, 
            в параметре url указано откуда она должна забрать JSON для отображения -->
        <table  
            class="easyui-datagrid" 
            title="Multiple Sorting" 
            style="width:auto;height:auto"
            id="dg"
            fitColumns="true"
            data-options="singleSelect:true,collapsible:true,
                    url:'/static/2.json',
                    method:'post',
                    remoteSort:false,
                    multiSort:true
                ">
            <thead>
                <tr>
                    <th field="subjectName" width="150" sortable="true">Наименование субъекта</th>
                    <th field="hospitalName" width="150" sortable="true">Наименование больницы</th>
                    <th field="diseaseName" width="150" sortable="true">Наименование болезни</th>
                    <th field="patiensCnt" width="80" sortable="true">Число заболевших</th>
                    <th field="issuedCnt" width="80" sortable="true">Число выздоровевших</th>
                    <th field="trend" width="80" sortable="true" data-options="styler:cellStyler">Тенденция</th>
                </tr>
            </thead>
        </table>
        <script type="text/javascript">
            $(function(){
                var dg = $('#dg').datagrid();
                dg.datagrid('enableFilter', [])
            });


            function myformatter(date){
                var y = date.getFullYear();
                var m = date.getMonth()+1;
                var d = date.getDate();
                return y+(m<10?('0'+m):m)+(d<10?('0'+d):d);
            }
            function myparser(s){
                if (!s) return new Date();
                var y = parseInt(s[0]+s[1]+s[2]+s[3], 10);
                var m = parseInt(s[4]+s[5], 10);
                var d = parseInt(s[6]+s[7], 10);
                if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
                    return new Date(y,m-1,d);
                } else {
                    return new Date();
                }
            }

            <!-- Раскрашивание колонки тенденция  -->
            function cellStyler(value,row,index){
            if (value < 0)
                return 'background-color:#FF7F7F;color:#7F0000;';
            else if (value > 0)
                return 'background-color:#7FFF7F;color:#007F00;';
            }
        </script>
    </div>
</body>
</html>